
<html>

<head>
    <include file="public@head" title="添加管理员-系统设置" />
    <link rel="stylesheet" href="/static/css/tags.css" rel="stylesheet">
</head>

<body class="layui-layout-admin">
    <include file="public@header" />
    <include file="public@side" />
    <div class="layui-body">
        <div class="layui-breadcrumb" lay-filter="breadcrumb">
            <a href="{:url('tdadmin/index/index')}">主页</a>
            <a href="">系统设置</a>
            <a href="{:url('tdadmin/teacher/index')}">教师列表</a>
            <a><cite>添加教师</cite></a>
        </div>

        <div class="layui-fluid mgt10">
            <div class="layui-card">
                <div class="layui-card-header">
                    添加教师
                </div>
                <div class="layui-card-body">
                    <form method="post" action="{:url('add')}" class="layui-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">工号<span class="form-required">*</span></label>
                            <div class="layui-input-inline">
                                <input id="teacher_no" type="text" class="layui-input" name="teacher_no"
                                    lay-verify="required" lay-verType="tips" placeholder="教师工号">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">真实姓名</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" name="real_name" placeholder="请输入真实姓名">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">联系方式</label>
                            <div class="layui-input-inline">
                                <input id="phone" type="text" class="layui-input" name="phone" placeholder="请输入联系方式">
                            </div>
                        </div>

                        <!-- <div class="layui-form-item">
                        <label class="layui-form-label">性别<span class="form-required">*</span></label>
                        <div class="layui-input-inline">
                            <select name="gender">
                                <option value="">——请选择角色——</option>
                                <option value="0">保密</option>
                                <option value="1">男</option>
                                <option value="2">女</option>
                            </select>
                        </div>
                    </div> -->

                        <div class="layui-form-item">
                            <label class="layui-form-label">所属学院<span class="form-required">*</span></label>
                            <div class="layui-input-inline">
                                <select lay-filter="college" id="college" name="college" lay-verify="type"
                                    name="college">
                                    <option value="">——请选择学院——</option>
                                    <volist name="colleges" id="val">
                                        <option value="{$val.id}">{$val.college_name}</option>
                                    </volist>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">所属专业<span class="form-required">*</span></label>
                            <div class="layui-input-inline">
                                <select name="specialty" id="specialty">
                                    <option value="">——请选择专业——</option>
                                    <volist name="specialties" id="val">
                                        <option value="{$val.id}">{$val.specialty_name}</option>
                                    </volist>
                                </select>
                            </div>
                        </div>

                        <!--<div class="layui-form-item">-->
                            <!--<label class="layui-form-label">选择标签<span class="form-required">*</span></label>-->
                            <!--<div id="tag_container" class="layui-input-block"-->
                                <!--style="overflow-y: scroll;max-height:200px;">-->
                                <!--<volist name="tagList" id="val">-->
                                    <!--<input type="checkbox" lay-skin="primary" lay-filter="c_one" class="cityId"-->
                                        <!--title="{$val.tag}" value="{$val.id}">-->
                                <!--</volist>-->
                            <!--</div>-->
                            <input type="hidden" class="layui-input" name="tag_text" id="tags_input" />
                            <!--<label class="layui-form-label">新建标签</label>-->
                            <!--<div class="layui-input-inline">-->
                                <!--<input type="text" class="layui-input" name="newTag" id="newTag" placeholder="请输入标签">-->
                            <!--</div>-->
                            <!--<a class="layui-btn layui-btn-primary" href="javascript:addTag();">新增</a>-->
                        <!--</div>-->


                        <div  class="layui-form-item">
                            <div class="wrap">
                                <div id="tagValue" class="label-selected">

                                </div>

                                <div style="float:left;width:100%">
                                    <a class="layui-btn layui-btn-normal labela show-labelitem" style="margin-left: 0px; display: none; border-radius: 6px;">展开标签库 </a>
                                    <a class="layui-btn layui-btn-normal labela hide-labelitem" style="margin-left: 0px; border-radius: 6px;">收起标签库 </a>
                                </div>

                                <div class="layui-col-md12" id="labelItem" style="display: block;">
                                    <!--标签库-->
                                    <div  class="label-item" style="border-radius:6px;overflow-y: scroll;max-height:200px;">
                                        <volist name="tagList" id="val">
                                            <li data="{$val.tag}" ><span class="glyphicon glyphicon-plus" aria-hidden="true"></span><span>{$val.tag}</span><div class='tag-delete' data="{$val.tag}" tag="{$val.tag}"></div></li>
                                        </volist>
                                    </div>
                                </div>

                                <!-- 前两个用于向后台提交数据     后3个用于页面判断 -->
                                <!-- 从标签库里选择的标签ID   1-->                      <!--仅从标签库选择，仅ID-->
                                <!-- <label>从标签库里选择的标签ID  :</label> -->
                                <div style="margin:15px;display:none;"><input name="imagelabels" disabled="true" id="imagelabels" style="width:300px"></div>

                                <!-- 新增的自定义标签文字     2-->                      <!--2、3、4 都是文字，且有对应顺序的数组-->
                                <!-- <label>新增的自定义标签文字  :</label> -->
                                <div style="margin:15px;display:none"><input name="newtext" style="width:300px"></div>

                                <!-- 所有已经选择的标签文字   3-->
                                <!-- <label>所有已经选择的标签文字  :</label> -->
                                <div style="margin:15px;display:none"><input name="selectedtext" disabled style="width:300px"></div>
                                <!-- 所有标签库里的标签文字   4-->
                                <!-- <label>所有标签库里的标签文字  :</label> -->
                                <div style="margin:15px;display:none"><input name="existedtext" disabled style="width:300px"></div>

                                <div class="add-label" style="display:inline-block">
                                    <label style="font-weight:normal;">添加标签  :</label>
                                    <input type="text" id="labelName" class="form-control" style="width:200px;display:inline-block;border-radius:6px; " placeholder="请输入标签名">
                                    <a id="label-self" class="layui-btn layui-btn-normal" style="border-radius:6px;"><span class="glyphicon glyphicon-plus glyphicon glyphicon-plus glyphicon-plus-button" aria-hidden="true"></span>添加标签 </a>
                                </div>

                            </div>
                        </div>


                        <div class="layui-form-item">
                            <label class="layui-form-label">密码<span class="form-required">*</span></label>
                            <div class="layui-input-inline">
                                <input type="password" class="layui-input" name="login_pass" lay-verify="required"
                                    lay-verType="tips" placeholder="请输入密码">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">确认密码<span class="form-required">*</span></label>
                            <div class="layui-input-inline">
                                <input type="password" class="layui-input" name="upass" lay-verify="required"
                                    lay-verType="tips" placeholder="请输入确认密码">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">是否启用<span class="form-required"></span></label>
                            <div class="layui-input-block">
                                <input type="radio" class="layui-input" name="status" title="是" value="1"
                                    checked="checked">
                                <input type="radio" class="layui-input" name="status" value="0" title="否">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="submit" class="layui-btn" lay-submit lay-filter="general">添加</button>
                                <a class="layui-btn layui-btn-primary" href="javascript:history.back(-1);">返回</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <include file="public@scripts" />
    <script type="text/javascript">

        $('#teacher_no').blur(function () {
            var teacher_no = $(this).val();
            $.post("{:url('teacher/checkNo')}", { 'teacher_no': teacher_no }, function (res) {
                if (res.code == 1) {
                    layer.msg(res.msg, { icon: 1 }, function () {
                        return false;
                    });
                } else {
                    layer.msg(res.msg, { icon: 2 }, function () {
                        return false;
                    });
                }
            });
        });

        // $('#phone').blur(function () {
        //     var phone = $(this).val();
        //     $.post("{:url('teacher/checkPhone')}", { 'phone': phone }, function (res) {
        //         if (res.code == 1) {
        //             layer.msg(res.msg, { icon: 1 }, function () {
        //                 return false;
        //             });
        //         } else {
        //             layer.msg(res.msg, { icon: 2 }, function () {
        //                 return false;
        //             });
        //         }
        //     });
        // });


        var tags = [];
        function renderForm() {
            layui.use('form', function () {
                var form = layui.form;//高版本建议把括号去掉，有的低版本，需要加()
                form.render();
            });
        }

        var form = layui.form, layer = layui.layer;

        form.on('select(college)', function (data) {
            var college_id = $("#college").val();
            $.post("{:url('teacher/getSpecialties')}", { 'college_id': college_id }, function (res) {
                if (res.code == 1) {
                    layer.msg(res.msg, { icon: 1 }, function () {
                        return false;
                    });
                } else {
                    $("#specialty").empty();
                    $("#specialty").append('<option value="">——请选择专业——</option>');
                    const data = res.data;
                    data && data.map(spec => {
                        $("#specialty").append("<option value=" + spec.id + ">" + spec.specialty_name + "</option>");
                    })
                    form.render();
                }
            });
        })

        form.on('checkbox(c_one)', function (data) {
            if (tags.indexOf(data.value) > -1) {
                let index = tags.indexOf(data.value)
                tags.slice(index, 1);
            } else {
                tags.push(data.value);

                $("#tags_input").val(tags.join(','))
            }
            var item = $(".cityId");
            for (var i = 0; i < item.length; i++) {
                if (item[i].checked == false) {
                    console.log(item, $("#c_all").val())
                    $("#c_all").prop("checked", false);
                    form.render('checkbox');
                    break;
                }
            }

        });


        function addTag() {
            let tag = $("#newTag").val();
            if (!tag) return;
            $.post("{:url('teacher/addTag')}", { 'newTag': tag }, function (res) {
                if (res.code == 1) {
                    layer.msg(res.msg, { icon: 1 }, function () {
                        return false;
                    });
                } else {
                    let newTag = res.data;
                    console.log(res)
                    $("#specialty").empty();
                    $("#tag_container").append(' <input type="checkbox" lay-skin="primary" lay-filter="c_one" class="cityId" title="' + newTag.tag + '" value="' + newTag.id + '">');

                    form.render();
                }
            });
        }
    </script>
<script>


    /******************************** Part 01 初始化开始**********************************/
//定义全局变量--数组

    var newText = new Array();
    var selectedText =  new Array();
    var existedText = new Array();

    $(function(){


        $(".show-labelitem").on("click",function(){
            $(this).hide();
            $(".hide-labelitem").show();
            $("#labelItem").show();
        });

        $(".hide-labelitem").on("click",function(){
            $(this).hide();
            $(".show-labelitem").show();
            $("#labelItem").hide();
        });


        $("input[name='imagelabels']").val('');      //已经选择的标签ID
        $("input[name='newtext']").val('');          //新建的标签文本，要存入数据库的
        $("input[name='selectedtext']").val('');
        $("input[name='existedtext']").val('');


//给标签库里的标签添加点击事件
        $(".label-item").on("click","li",function(){

            var id = $(this).attr("data");
            var text = $(this).children("span:nth-child(2)").html();
            if($(this).hasClass("selected")){
                return false;
            }
            if(addLabel(id,text)){                  //添加，并要把标签库里相应的标签设置为已选择
                $(this).addClass("selected");
            }

        });
//初始化4

        $.post('getSelectedTagList',{},function (res) {
            console.log(res)
            resetExistedText(res.tags,res.allTags);
        })

    })

    /********************************初始化结束**********************************/




    /******************************************** Part 02 设置数组和input**********************************************************/

    function resetDataValue(){                    /******1*****直接从最上面生成**/
    val = '';
        tags = []
        for(var i = 0; i < $(".label-selected").children("li").length; i++){
            var data = $(".label-selected").children("li").eq(i).attr("data");
            if(data!="0"){              //只存储通过标签库添加的 ID，新增的自定义标签 data 为 0   *********
                val += data+',';
                tags.push(data);
            }
        }
        $("input[name='imagelabels']").val(val);
        $("#tags_input").val(tags.join(","));

    }

    //2、3、4：数据同时存到 数组 和 input。数组：方便检索；input：方便观察     数组和文字，顺序一致

    function addNewText(labelName){              /*****2+***文字，数组 各自增****/
    valtext = $("input[name='newtext']").val();;
        valtext += labelName+',';
        $("input[name='newtext']").val(valtext);
        newText.push(labelName);
    }
    function removeNewText(labelName){          /******2-***数组————>文字****/
    valtext = '';
        var index = newText.indexOf(labelName);
        if(index !== -1)
        {
            newText.splice(index,1);
        }
        for(i=0;i<newText.length;i++)
        {
            valtext += newText[i]+',';
        }
        $("input[name='newtext']").val(valtext);

    }


    function resetSelectedText(){               /******3**根据 最上面 生成单独的数组和文字*****/
    selectedText=[];   //首先要清空
        valtext = '';
        for(i=0;i<$(".label-selected").children("li").length;i++)
        {
            var text = $(".label-selected").children("li").eq(i).text();
            selectedText[i]=text;
            valtext += selectedText[i]+',';
        }
        $("input[name='selectedtext']").val(valtext);

    }


    function resetExistedText(tags,allTags){               /******4**根据 标签库列表 生成单独的数组和文字*****/
    existedText=[];   //首先要清空
        valtext = '';
        allTags.map((obj)=>{
            existedText.push(obj.tag)
        })

        for (let i = 0; i < tags.length; i++){
            // var text = $(".label-item").children("li").eq(i).children("span:nth-child(2)").html();
            valtext += tags[i].tag+',';
            selectedText.push(tags[i].tag)
            if(addLabel(tags[i].id,tags[i].tag))   //新添加的标签，添加，并2+
            {
                addNewText(tags[i].tag);
            }
        }
        $("input[name='existedtext']").val(valtext);
        resetSelectedText()

    }


    /*********************************************设置数组和input结束*******************************************************/


    /******************************************* Part 03 添加****************************************/
//添加自定义标签
    $("#label-self").on("click",function(){      // 3情况：重复、标签库、新增

        var labelName = $("#labelName").val();
        if(labelName!=null&&labelName!=""){

            var indexOfselected = selectedText.indexOf(labelName);
            var indexOfexisted = existedText.indexOf(labelName);


            if(indexOfselected !== -1)     //已经存在于已选择，不添加
            {
                tips("标签已存在！");
                return;
            }

            else if(indexOfexisted !== -1) //已经存在于标签库，添加，并要把标签库里相应的标签设置为已选择
            {
                var li = $(".label-item").children("li").eq(indexOfexisted);
                var id = li.attr("data");
                if(addLabel(id,labelName)){
                    li.addClass("selected");
                }
                return;
            }
            else
            {

                $.post("{:url('teacher/addTag')}", { 'newTag': labelName }, function (res) {
                    if (res.code == 1) {
                        layer.msg(res.msg, { icon: 1 }, function () {
                            return false;
                        });
                    } else {
                        let newTag = res.data;
                        console.log(res)
                        // $("#specialty").empty();
                        // $("#tag_container").append(' <input type="checkbox" lay-skin="primary" lay-filter="c_one" class="cityId" title="' + newTag.tag + '" value="' + newTag.id + '">');
                        //
                        // form.render();
                        let html = `<li data="${newTag.id}" class="selected"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span><span>${newTag.tag}</span></li>`
                        $(".label-item").append(html)
                        if(addLabel(newTag.id,labelName))   //新添加的标签，添加，并2+
                        {
                            addNewText(labelName);
                        }

                    }
                });


            }
        }
        else{
            tips("请填写标签名！");
        }

    });


    //添加标签到最上面
    function addLabel(id,text){
        var num=8;              //标签最多个数
        // if($(".label-selected").children("li").length >= num){
        //     tips("最多可以选择"+num+"个哦");
        //     return false;
        // }

        var labelHTML = getappendHTML(id,text);
        $(".label-selected").append(labelHTML);

        //新增，刷新 1、3
        resetDataValue();
        resetSelectedText();

        return true;
    }


    /************************************************ Part 04 删除************************************/
//删除已选标签
    $(".label-selected").on("click","li .delete",function(){
        var id = $(this).parent().attr("data");
        var text = $(this).parent().text();
        //删除最上面
        $(this).parent().remove();

        //刷新 1、3
        resetDataValue();
        resetSelectedText();


        if(id == 0){             //删除的是新增标签  2-
            removeNewText(text);
        }
        else{                    //删除的是标签库里的标签  移除class
            $(".label-item").find("li[data='"+id+"']").removeClass("selected");
        }

    });

    /***************************************** Part 05 提交*******************************************/
    function submit()
    {
        var labelID = $("input[name='imagelabels']").val();
        var newtext = $("input[name='newtext']").val();     //保存到数据库
        alert(labelID);


    }

    /************************************************************************************/
    function getappendHTML(id,text){
        return "<li data='"+id+"''>"+text+"<div class='delete'></div></li>";
    }
    function tips(content) {
        layer.open({
            type: 1 ,
            offset: 'auto', //具体配置参考：offset参数项
            title : '提示',
            content: '<div style="padding: 20px 80px;">'+content+'</div>',
            btn: '确定',
            btnAlign: 'c', //按钮居中
            yes:layer.closeAll()
        });
    }



    $(".tag-delete").click(function () {
        const id = $(this).attr('data');
        const tag = $(this).attr('tag');
        const parent =  $(this).parent();
        if (parent.hasClass("selected")) {
            return layer.msg('请先清除选中的标签')
        }else{
            layer.confirm('您将删除【' + tag+ '】标签', function (index) {
                layer.close(index);
                $.post("{:url('teacher/deleteTag')}",{id,tag},function (res) {
                    parent.remove();
                })
            });
        }

        return false;

    })

</script>
</body>

</html>